<template>
  <el-container style="height: 100%; padding: 0" >
    <el-header>
      <div class="content-header">
        <h1>图书管理
          <el-button style="float: right;" type="primary" plain @click="download" size="medium" v-if="getManage">
            下载模板<i class="el-icon-download"></i>
          </el-button>
        </h1>
      </div>
    </el-header>
    <div class="app-container">
      <div class="box">
        <div class="filter-container">
          <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
          <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
          <el-input placeholder="图书作者" v-model="pagination.author" style="width: 200px;" class="filter-item"></el-input>
          <el-button type="primary" @click="getAll()" class="dalfBut">查询</el-button>
          <el-button class="butT" @click="handleCreate()" v-if="getManage">
            新建</el-button>
        </div>
        <div>
          <el-upload
            class="load"
            action="api/books/upload"
            :before-upload="beforeUpload"
            :multiple="false"
            :show-file-list="false"
            :on-success="handleSuccess">
            <el-button type="success" plain v-if="this.manage === '1'">导入数据
              <i class="el-icon-upload" style="font-size: 15px"></i>
            </el-button>
          </el-upload>
          <el-button type="warning" plain>导出数据
            <i class="el-icon-download" style="font-size: 15px"></i>
          </el-button>
        </div>
        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
          <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
          <el-table-column prop="author" label="作者" align="center"></el-table-column>
          <el-table-column label="操作" v-if="this.manage === '1'" align="center">
            <template slot-scope="scope">
              <el-button type="primary" v-if="getManage" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="danger" v-if="getManage" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <div class="pagination-container">
          <el-pagination
            class="pagiantion"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
          </el-pagination>
        </div>
        <!-- 新增标签弹层 -->
        <bookadd ref="bookadd"></bookadd>
        <!-- 编辑标签弹层 -->
        <bookedit ref="bookedit"></bookedit>
      </div>
    </div>
  </el-container>
</template>
<script>
import bookadd from '../components/bookadd'
import bookedit from '../components/bookedit'
export default {
  name: 'books',
  components: {bookadd, bookedit},
  props: ['userManage'],
  data () {
    return {
      getManage: '',
      manage: '',
      show: true,
      dataList: [], // 当前页要展示的列表数据
      pagination: { // 分页相关模型数据
        currentPage: 1, // 当前页码
        pageSize: 5, // 每页显示的记录数
        total: 0, // 总记录数
        type: '',
        name: '',
        description: ''
      }
    }
  },
  created () {
    if (localStorage.getItem('manage') != null) {
      // eslint-disable-next-line eqeqeq
      this.manage = localStorage.getItem('manage')
    } else {
      localStorage.setItem('manage', this.$parent.$parent.$parent.user.manage)
      this.manage = localStorage.getItem('manage')
    }
    if (this.manage === '1') {
      this.getManage = true
    } else {
      this.getManage = false
    }
    // 调用查询全部数据的操作
    this.getAll()
  },
  methods: {
    getAll: function () {
      var param = ''
      param = '?type=' + this.pagination.type
      param += '&name=' + this.pagination.name
      param += '&description=' + this.pagination.author
      // 发送异步请求
      this.$axios.get('/books/' + this.pagination.currentPage + '/' + this.pagination.pageSize + param).then((res) => {
        // this.pagination.pageSize = res.data.data.size
        this.pagination.currentPage = res.data.data.current
        this.pagination.total = res.data.data.total
        this.dataList = res.data.data.records
      })
    },

    // 切换页码
    handleCurrentChange (currentPage) {
      // 修改页码值为当前选中的页码值
      this.pagination.currentPage = currentPage
      // 执行查询
      this.getAll()
    },

    // 弹出添加窗口
    handleCreate: function () {
      this.$refs.bookadd.dialogFormVisible = true
      this.$refs.bookadd.resetForm()
    },
    download: function () {
      window.location.href = 'http://rd3ehgzse.hn-bkt.clouddn.com/template.xlsx'
    },
    // 删除
    handleDelete (row) {
      // console.log(row)
      // console.log(row.id)
      this.$confirm('此操作永久删除当前信息，是否继续？', '提示', {type: 'info'}).then(() => {
        this.$axios.delete('/books/' + row.id).then((res) => {
          if (res.data.flag) {
            this.$message.success('删除成功')
          } else {
            this.$message.error('数据同步失败，自动刷新')
          }
        }).finally(() => {
          // 2.重新加载数据
          this.getAll()
        })
      }).catch(() => {
        this.$message.info('取消操作')
      })
    },
    handleSuccess: function (response, file) {
      if (response.flag === true) {
        this.$message.success('导入成功')
      } else {
        this.$message.error('导入失败')
      }
      this.getAll()
    },
    // 弹出编辑窗口
    handleUpdate (row) {
      this.$axios.get('/books/' + row.id).then((res) => {
        if (res.data.flag && res.data.data != null) {
          this.$refs.bookedit.dialogFormVisible4Edit = true
          this.$refs.bookedit.formData = res.data.data
        } else {
          this.$message.error('数据同步失败，自动刷新')
        }
      }).finally(() => {
        // 2.重新加载数据
        this.getAll()
      })
    },
    // 修改
    // 条件查询
    beforeUpload: function (file) {
      var isform
      if (file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        isform = true
      } else {
        isform = false
      }
      if (!isform) {
        this.$message(
          {message: '上传文件只能是 xlsx或xls格式!', type: 'error', customClass: 'height', duration: 2300})
      }
      return isform
    }
  }
}
</script>
<style scoped>
@import url('../css/style.css');
.load{
  display: inline-block;
}
</style>
